<route lang="json5" type="home">
{
  "layout": "theme",
  "style": {
    "navigationBarTitleText": "首页"
  }
}
</route>

<script setup lang="ts">
import ThemeToggle from '@/components/ThemeToggle.vue'

import { useThemeStore } from '@/store'

// 响应式数据
const platformName = ref('')

// 主题 Store（用于主题切换功能）
const themeStore = useThemeStore()
// 卡片数据
const cards = [
  {
    icon: '📱',
    title: '多平台支持',
    desc: '支持 H5、小程序、App 多平台编译',
    onClick: showInfo,
  },
  {
    icon: '⚡',
    title: '现代技术栈',
    desc: 'Vue3 + TypeScript + Vite + UnoCSS',
    onClick: showTech,
  },
  {
    icon: '🛠️',
    title: '开发工具',
    desc: 'ESLint + Prettier + Stylelint 规范',
    onClick: showFeatures,
  },
  {
    icon: '🎨',
    title: '主题设置',
    desc: '支持浅色/深色/自动模式切换',
    onClick: goToThemeSettings,
  },
]
// 事件处理
function showInfo() {
  uni.showToast({
    title: '支持 H5、微信小程序、App 等多平台',
    icon: 'none',
    duration: 2000,
  })
}

function showTech() {
  uni.showToast({
    title: 'Vue3 + TS + Vite + UnoCSS 现代化技术栈',
    icon: 'none',
    duration: 2000,
  })
}

function showFeatures() {
  uni.showToast({
    title: '完整的代码规范和开发工具支持',
    icon: 'none',
    duration: 2000,
  })
}

// 前往主题设置页面
function goToThemeSettings() {
  uni.navigateTo({
    url: '/pages/theme/index',
  })
}
</script>

<template>
  <view class="index-page">
    <!-- 当前演示的悬浮按钮 -->
    <ThemeToggle
      v-bind="{
        floating: true,
        position: 'top-right',
        size: 'medium',

      }"
    />
    <!-- 页面头部 -->
    <view class="header">
      <view class="logo">
        <text class="logo-text">🚀</text>
      </view>
      <view class="title">
        <text class="title-text">hzy-uni-template</text>
        <text class="subtitle">基于 unibest 的 UniApp 基础模版</text>
      </view>
    </view>

    <!-- 功能卡片 -->
    <view class="cards">
      <view
        v-for="(card, index) in cards"
        :key="index"
        class="card"
        @click="card.onClick"
      >
        <view class="card-icon">
          {{ card.icon }}
        </view>
        <view class="card-title">
          {{ card.title }}
        </view>
        <view class="card-desc">
          {{ card.desc }}
        </view>
      </view>
    </view>

    <!-- 快速开始 -->
    <view class="quick-start">
      <view class="section-title">
        快速开始
      </view>
      <view class="command-list">
        <view class="command-item">
          <text class="command-label">开发环境：</text>
          <text class="command-text">pnpm dev:h5</text>
        </view>
        <view class="command-item">
          <text class="command-label">小程序：</text>
          <text class="command-text">pnpm dev:mp</text>
        </view>
        <view class="command-item">
          <text class="command-label">构建发布：</text>
          <text class="command-text">pnpm build</text>
        </view>
      </view>
    </view>

    <!-- 底部信息 -->
    <view class="footer">
      <text class="footer-text">当前平台：{{ platformName }}</text>
      <text class="footer-text">版本：v1.0.0</text>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.index-page {
  min-height: 100vh;
  /* 使用主题变量，提供降级方案 */
  background: var(--page-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
  padding: 40rpx;
  color: var(--text-color, #333);
  transition: all 0.3s ease;
}

.header {
  position: relative;
  text-align: center;
  margin-bottom: 60rpx;

  .logo {
    margin-bottom: 20rpx;

    .logo-text {
      font-size: 80rpx;
    }
  }

  .title {
    .title-text {
      display: block;
      font-size: 48rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      color: var(--text-color);
    }

    .subtitle {
      font-size: 28rpx;
      opacity: 0.8;
      color: var(--text-color-secondary);
    }
  }

  .theme-toggle {
    position: absolute;
    top: 0;
    right: 0;

    .theme-btn {
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      /* 主题按钮使用主色调 */
      background: var(--primary-color, rgba(255, 255, 255, 0.2));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      transition: all 0.3s ease;
      border: 2rpx solid var(--primary-color, rgba(255, 255, 255, 0.3));
      color: #ffffff;

      &:hover {
        opacity: 0.8;
        transform: scale(1.05);
      }

      &:active {
        transform: scale(0.95);
      }
    }
  }
}

.cards {
  margin-bottom: 60rpx;

  .card {
    /* 使用主题变量 */
    background-color: var(--card-bg, rgba(255, 255, 255, 0.9));
    color: var(--text-color);
    border: 2rpx solid var(--border-color, transparent);
    border-radius: 20rpx;
    padding: 40rpx;
    margin-bottom: 30rpx;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);

    &:hover {
      transform: translateY(-5rpx);
      box-shadow: 0 8rpx 25rpx var(--mask-bg, rgba(0, 0, 0, 0.1));
    }

    &:active {
      transform: scale(0.98);
    }

    /* 主题设置卡片特殊样式 */
    &.primary-card {
      border-color: var(--primary-color);
      background: linear-gradient(135deg, var(--primary-color, #32f08c) 20%, var(--card-bg));
    }

    /* 悬浮主题卡片特殊样式 */
    &.floating-card {
      border-color: var(--success-color, #4cd964);
      background: linear-gradient(135deg, var(--success-color, #4cd964) 15%, var(--card-bg));
    }

    .card-icon {
      font-size: 60rpx;
      margin-bottom: 20rpx;
      display: block;
    }

    .card-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 15rpx;
      color: var(--text-color);
    }

    .card-desc {
      font-size: 26rpx;
      opacity: 0.8;
      line-height: 1.4;
      color: var(--text-color-secondary);
    }
  }
}

.quick-start {
  margin-bottom: 60rpx;

  .section-title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 30rpx;
    text-align: center;
    color: var(--text-color);
  }

  .command-list {
    background-color: var(--card-bg, rgba(0, 0, 0, 0.1));
    border: 2rpx solid var(--border-color, transparent);
    border-radius: 20rpx;
    padding: 30rpx;

    .command-item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .command-label {
        font-size: 28rpx;
        opacity: 0.8;
        min-width: 160rpx;
        color: var(--text-color-secondary);
      }

      .command-text {
        font-size: 28rpx;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        background-color: var(--input-bg, rgba(255, 255, 255, 0.1));
        color: var(--primary-color, #32f08c);
        border: 2rpx solid var(--border-color, transparent);
        padding: 10rpx 20rpx;
        border-radius: 10rpx;
      }
    }
  }
}

.footer {
  text-align: center;
  opacity: 0.6;

  .footer-text {
    display: block;
    font-size: 24rpx;
    margin-bottom: 10rpx;
    color: var(--text-color-secondary);

    &:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
